<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09_自定义JS对象</title>
</head>
<body>
<table border="1px" class="table">
    <caption>商品表</caption>
    <tr>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>商品库存</th>
    </tr>
</table>

<script>
    //定义数组模拟从后端拿到的数据
    let productArr = [
        {title:'小米1',price:800,num:10},
        {title:'小米2',price:500,num:7},
        {title:'小米4',price:555,num:5},
        {title:'小米88',price:444,num:4},
    ]
    function createTable(){
        let table=document.querySelector('.table');
        for (let i=0;i<productArr.length;i++){
            let product=productArr[i];
            let tr=document.createElement('tr');
            let td1=document.createElement('td');
            td1.innerHTML=product.title;
            let td2=document.createElement('td');
            td2.innerHTML=product.price;
            let td3=document.createElement('td');
            td3.innerHTML=product.num;
            tr.append(td1,td2,td3);
            table.append(tr);
        }
    }
    //应该在页面创建时调用
    createTable();
</script>
</body>
</html>